/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import React, { useRef, useEffect, useMemo, useCallback, useState } from 'react';
import DragTable from '@/components/DragTable';
import type { ProColumns, ActionType } from '@ant-design/pro-table';
import type { StringObjType } from '../../AmountApply/index.d';
import { Button, Input, message, Space } from 'antd';
import { cloudCallBlackColumn, cloudCallTemplateColumn } from './utils';
import {
  getCloudCallBlackList,
  getCloudCallTemplateList,
  moveoutBlackList,
  templateCheck,
  templateReject,
} from '@/services/cloudCall';
import ProTable from '@ant-design/pro-table';

import styles from './index.less';
import BlackModal from './BlackModal';

const CloudCallTemplate: React.FC<{
  active: boolean;
  activeKey: string;
  screenSize: boolean;
}> = (props) => {
  const { activeKey, screenSize, active } = props;
  const actionRef = useRef<ActionType>();

  const [modalInfo, setModalInfo] = useState<{
    visible: boolean;
    courierPhone: string;
    tplId: string;
  }>();

  const tableRefresh = useCallback(() => {
    actionRef.current?.reload();
  }, [actionRef]);

  useEffect(() => {
    if (active) {
      tableRefresh();
    }
  }, [active, tableRefresh, actionRef]);

  const onFinish = async (params: StringObjType) => {
    const { current, ...rest } = params;
    if (!active) return;
    const data = {
      page_num: params.current,
      type: activeKey,
      ...rest,
    };
    return activeKey == 'black'
      ? await getCloudCallBlackList(data)
      : await getCloudCallTemplateList(data);
  };

  // 解除拉黑
  const removeBlack = async (item: StringObjType) => {
    const { code } = await moveoutBlackList(item);
    if (code == 0) {
      message.info('操作成功');
      actionRef.current?.reload();
    }
  };

  // 通过
  const onApprove = async (item: StringObjType) => {
    const { code } = await templateCheck({ tplId: item.ivid });
    if (code == 0) {
      message.info('操作成功');
      tableRefresh();
    }
  };

  // 拒绝
  const onReject = async (item: StringObjType) => {
    const { code } = await templateReject({ tplId: item.ivid });
    if (code == 0) {
      message.info('操作成功');
      tableRefresh();
    }
  };

  // 拒绝并拉黑
  const onBlack = async (item: StringObjType) => {
    setModalInfo({
      visible: true,
      courierPhone: item.courier_tel,
      tplId: item.ivid,
    });
  };

  const onModalCance = () => {
    setModalInfo({
      visible: false,
      courierPhone: '',
      tplId: '',
    });
  };

  const columns: ProColumns<StringObjType>[] = useMemo(
    () =>
      activeKey === 'black'
        ? [
            {
              title: '',
              dataIndex: 'username',
              hideInTable: true,
              renderFormItem: () => {
                return <Input placeholder='请输入手机号或申请人查询' />;
              },
            },
            ...cloudCallBlackColumn,
            {
              title: '操作',
              dataIndex: 'operation',
              search: false,
              align: 'center',
              render: (_, record) => {
                return (
                  <Space>
                    <Button size='small' onClick={removeBlack.bind(null, record)}>
                      取消拉黑
                    </Button>
                  </Space>
                );
              },
            },
          ]
        : [
            activeKey == '3'
              ? {
                  title: '',
                  dataIndex: 'username',
                  hideInTable: true,
                  renderFormItem: () => {
                    return <Input placeholder='请输入手机号查询' />;
                  },
                }
              : {
                  title: '',
                  hideInTable: true,
                  search: false,
                },
            {
              title: '序号',
              dataIndex: 'id',
              search: false,
              align: 'center',
            },
            {
              title: '模版内容',
              dataIndex: 'path',
              align: 'center',
              search: false,
              render: (_, record) => <audio style={{ height: 30 }} controls src={record.path} />,
            },
            ...cloudCallTemplateColumn,
            {
              title: '操作',
              dataIndex: 'operation',
              search: false,
              align: 'center',
              width: activeKey == '1' ? '20%' : '',
              render: (_, record) => (
                <Space>
                  <Button size='small' type='primary' onClick={onApprove.bind(null, record)}>
                    通过审核
                  </Button>
                  {activeKey == '1' && (
                    <Button size='small' onClick={onReject.bind(null, record)}>
                      拒绝
                    </Button>
                  )}
                  {activeKey == '1' && (
                    <Button size='small' onClick={onBlack.bind(null, record)}>
                      拒绝并拉黑
                    </Button>
                  )}
                </Space>
              ),
            },
          ],
    [activeKey],
  );

  return (
    <DragTable>
      <ProTable<StringObjType>
        className={`kb-pro-table ${styles.cloudcall}`}
        actionRef={actionRef}
        rowKey='id'
        request={onFinish}
        columns={columns}
        pagination={{
          pageSize: 10,
          showQuickJumper: false,
          showSizeChanger: false,
          simple: screenSize,
        }}
        scroll={{ x: 1200 }}
        options={false}
        search={
          activeKey == '3'
            ? {
                collapsed: false,
                collapseRender: () => <></>,
                labelWidth: 0,
              }
            : false
        }
      />
      <BlackModal {...modalInfo} onReFresh={tableRefresh} onCancel={onModalCance} />
    </DragTable>
  );
};

export default CloudCallTemplate;
